<template>
  <div :class="`${baseClass} ${typeClass[color ?? 'blue']}  `">
    <guat-icon :icon :size="size ?? 24" />
  </div>
</template>

<script setup lang="ts">
import { IconButtonColor } from "./type";
defineProps<{
  icon: string;
  size?: number;
  color?: IconButtonColor;
}>();

const baseClass =
  "flex items-center justify-center w-11 h-11 cursor-pointer rounded-[10px] duration-100 select-none";
const typeClass: Record<IconButtonColor, string> = {
  blue: "text-primary bg-primary-light-1 hover:bg-primary-light-2 active:bg-primary-light-3",
  green: "text-success bg-success-light-1 hover:bg-success-light-2 active:bg-success-light-3",
  orange: "text-warning bg-warning-light-1 hover:bg-warning-light-2 active:bg-warning-light-3",
  red: "text-danger bg-danger-light-1 hover:bg-danger-light-2 active:bg-danger-light-3",
};
</script>

<style scoped></style>
